<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        新增站点
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <p>基本信息</p>
      <div class="header">
        <ul>
          <li>
            <span>站点编号</span>
            <el-input disabled style="width: 70%;" v-model="data_site.siteNumber"></el-input>
          </li>
          <li>
            <span>站点名称</span>
            <el-input style="width: 70%;" v-model="data_site.siteName"></el-input>
          </li>
          <li>
            <span>站点地址</span>
            <el-input style="width: 70%;" v-model="data_site.siteAddress"></el-input>
          </li>
          <li>
            <span>法人</span>
            <el-input style="width: 70%;" v-model="data_site.legalPerson"></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input style="width: 70%;" v-model="data_site.legalpersonPhone"></el-input>
          </li>
          <li>
            <span>站点负责人</span>
            <el-input style="width: 70%;" v-model="data_site.siteResponsible"></el-input>
          </li>
          <li>
            <span>站点负责人联系方式</span>
            <el-input style="width: 70%;" v-model="data_site.siteResponsiblePhone"></el-input>
          </li>
          <li>
            <span>所在区域</span>
            <el-input style="width: 70%;" v-model="data_site.area"></el-input>
          </li>
          <li>
            <span>区域负责人</span>
            <!--            <el-input style="width: 70%;" v-model="data_site.areaResponsible"></el-input>-->
            <el-select style="width: 70%;" v-model="areaResponsibleSect" value-key="id" placeholder="请选择"
                       @change="handleChangeSelected_area">
              <el-option
                v-for="item in options_areaResponsible"
                :key="item.id"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </li>
          <li>
            <span>区域负责人联系方式</span>
            <el-input style="width: 70%;" v-model="data_site.areaResponsiblePhone"></el-input>
          </li>
          <li>
            <span>开户行</span>
            <el-input style="width: 70%;" v-model="data_site.accountBank"></el-input>
          </li>
          <li>
            <span>开户账号</span>
            <el-input style="width: 70%;" v-model="data_site.accountOpen"></el-input>
          </li>
          <li>
            <span>纳税人识别号</span>
            <el-input style="width: 70%;" v-model="data_site.taxpayerNumber"></el-input>
          </li>
          <li>
            <span>账户名称</span>
            <el-input style="width: 70%;" v-model="data_site.siteResponsible"></el-input>
          </li>
          <li>
            <span>密码</span>
            <el-input style="width: 70%;" v-model="data_site.password"></el-input>
          </li>
        </ul>
      </div>
      <p>上传图片</p>
      <div class="intermediate">
        <ul>
          <li>
            <span>现场照片 :</span>
            <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
              <el-upload
                action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="2"
                :show-file-list="false"
                :on-success="function (res, file) { return handleSuccess_site(res, file)}"
                :before-upload="beforeImageUpload"
                :file-list="fileListSite"
              >
                <el-image v-if="siteImgPath" :src="siteImgPath"></el-image>
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </li>
          <li>
            <span>授权合同 :</span>
            <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
              <el-upload
                action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="2"
                :show-file-list="false"
                :on-success="function (res, file) { return handleSuccess_contract(res, file)}"
                :before-upload="beforeImageUpload"
                :file-list="fileListContract"
              >
                <el-image v-if="contractImgPath" :src="contractImgPath"></el-image>
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </li>

        </ul>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="saveSite()">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      areaResponsibleSect: "",
      options_areaResponsible: [],
      siteId: null,
      textarea: "",
      data_site: {siteNumber: "", xianzhaozhaopian: "", contract: "", taxpayerNumber: ""},
      siteImgPath: "",//现场图片
      contractImgPath: "",//合同图片
      fileListSite: [],//现场图片的集合
      fileListContract: [],//现场图片的集合
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName = JSON.parse(localStorage.getItem("message")).Name;
    this.generatorSiteNumber();
  },
  methods: {
    //
    handleChangeSelected_area(e) {
      console.log(e)
      this.data_site.areaResponsible = e.name
      this.data_site.areaResponsibleId = e.id
    },
    //上传图片
    handleSuccess_contract(res, file) {
      this.fileListContract = []
      this.fileListContract.push({name: res.data.name, url: res.data.url})
      this.contractImgPath = res.data.url;
      console.log(this.fileListContract)
    },
    handleSuccess_site(res, file) {
      this.fileListSite = []
      this.fileListSite.push({name: res.data.name, url: res.data.url})
      this.siteImgPath = res.data.url;
      console.log(this.fileListSite)
    },
    //商场图片的验证
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //保存站点
    saveSite() {
      let param = {
        "account": "",
        "area": "",
        "areaName": "",
        "areaResponsible": "",
        "areaResponsibleId": null,
        "areaResponsiblePhone": "",
        "contract": "",
        "createOnTime": "",
        "createOnUserId": "",
        "createOnUserName": "",
        "id": null,
        "jingdu": "",
        "legalPerson": "",
        "legalpersonPhone": "",
        "password": "",
        "siteAddress": "",
        "siteName": "",
        "siteNumber": "",
        "siteResponsible": "",
        "siteResponsiblePhone": "",
        "siteTbLogid": null,
        "state": null,
        "status": null,
        "weidu": "",
        "xianzhaozhaopian": "",
        "yingyezhizhao": ""
      }
      param.siteNumber = this.data_site.siteNumber
      param.siteName = this.data_site.siteName
      param.siteAddress = this.data_site.siteAddress
      param.legalPerson = this.data_site.legalPerson
      param.legalpersonPhone = this.data_site.legalpersonPhone
      param.siteResponsible = this.data_site.siteResponsible
      param.siteResponsiblePhone = this.data_site.siteResponsiblePhone
      param.area = this.data_site.area
      param.areaResponsible = this.data_site.areaResponsible
      param.areaResponsibleId = this.data_site.areaResponsibleId
      param.areaResponsiblePhone = this.data_site.areaResponsiblePhone
      param.accountBank = this.data_site.accountBank
      param.accountOpen = this.data_site.accountOpen
      param.account = this.data_site.siteResponsible
      param.password = this.data_site.password
      param.id = this.siteId
      param.createOnUserName = this.userName
      param.createOnUserId = this.userId
      param.taxpayerNumber = this.data_site.taxpayerNumber
      param.xianzhaozhaopian = JSON.stringify(this.fileListSite).toString()
      param.contract = JSON.stringify(this.fileListContract).toString()
      if (param.xianzhaozhaopian == "[]" || null || "") {
        this.$message.error("请选择现场图片");
        return
      }
      if (param.contract == "[]" || null || "") {
        this.$message.error("请选择合同图片");
        return
      }
      axios.post("JX_java/afferSale/site/addSite", param).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          window.history.go(-1);
        } else {
          this.$message.error(res.data.data);
        }
      })



    },
    //生成站点编号
    generatorSiteNumber() {
      axios.get("/JX_java/afferSale/generatorSiteNumber").then(res => {
        console.log(res.data.data)
        this.options_areaResponsible = res.data.data.comUserDbs
        this.data_site.siteNumber = res.data.data.siteNumber
        this.siteId = res.data.data.id;
      })
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;

  p {
    //text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    margin: auto;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .intermediate {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    margin: auto;
    padding-bottom: 20px;

    ul {
      margin-top: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 45%;
        font-size: 14px;
        margin-bottom: 10px;
        margin-right: 20px;
        display: flex;
        align-items: flex-start;

        span {
          display: inline-block;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }
}

.bottom {
  padding-top: 20px;
  text-align: center;
}
</style>
